<template>
	<z-paging class="container" ref="paging" v-model="orders" @query="queryList" :auto="false" :empty-view-center="false" :hide-no-more-by-limit="10">
		<template v-slot:top>
			<view class="search-wrapper">
				<u-search shape="round" v-model="keyword" @search="searchData"></u-search>
			</view>
		</template>
		<!-- 订单列表 -->
		<div class="order-list">
			<!-- 
			item.orderType
			 1系统 2复购
			 -->
			<view v-for="item in orders" :key="item.orderId" class="order-card">
				<!-- 订单头部 -->
				<view class="order-header">
					<view class="order-no">
						<!-- isMultiPackage 是否多包裹 -->
						<u-tag size="mini" v-if="item.isMultiPackage" text="多包裹" mode="dark" />
						<text class="order-no-num">订单号：{{ item.orderNo }}</text>
					</view>
					<text class="order-status" :style="`color:${item.wuliu.color}`">{{ item.wuliu.text }}</text>
				</view>

				<!-- 客户信息 -->
				<view class="info-row">
					<u-icon name="man-add" size="32" color="#007AFF" />
					<text class="info-text">{{ item.receiverName }} {{ item.receiverPhone }}</text>
				</view>

				<!-- 地址信息 -->
				<view class="info-row address-row">
					<u-icon name="map" size="32" color="#FFAB00" />
					<text class="info-text">{{ item.receiverAddress }}</text>
				</view>

				<!-- 金额与时间 -->
				<view class="price-time-row">
					<text class="price">￥{{ item.totalAmount }}</text>
					<text class="time">下单时间：{{ item.orderTime }}</text>
				</view>

				<!-- 操作按钮 未完成的时候展示 -->
				<!-- 订单取消/签收/完成 不再显示 -->
				<!--
				{{ item.orderStatus }} -- {{ ![130, 190, 200].includes(+item.orderStatus) }}
				-->
				<template v-if="![130, 190, 200].includes(+item.orderStatus)">
					<u-line margin="20rpx 0" color="#f0f0f0" />
					<view class="action-row">
						<!-- 分割线 -->
						<template v-if="!item.logisticsNo">
							<u-button type="primary" size="mini" :custom-style="btnStyle" @click="openSendDialog(item)">发货</u-button>
							<u-button type="error" size="mini" plain :custom-style="btnStyle" @click="cancelOrder(item)">取消</u-button>
						</template>
						<template v-else>
							<u-button type="warning" size="mini" plain :custom-style="btnStyle" @click="interceptOrder(item)">拦截</u-button>
						</template>
					</view>
				</template>
			</view>
		</div>
	</z-paging>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { navTo } from '../../common/utils';
import { orderStatusStr } from '../../common/order';
import { useLogisticsAction } from '@/hooks/useLogisticsAction';
import { listOrderByLogistics } from '../../api/order/list';
import { listOrder } from '../../api/platformOrders/orders/list';
import { listRepeatPurchaseOrder } from '../../api/platformOrders/orders/repeatPurchaseOrder';

const keyword = ref('');
const paging = ref(null);
const firstLoaded = ref(false);
const orders = ref<any[]>([]);
// 使用 Hook，传入刷新方法
const { execute } = useLogisticsAction(() => {
	paging.value.reload();
});

const openSendDialog = (order: any) => {
	navTo({
		url: '/pages/shipping/ship',
		_params: {
			id: order.orderId
		}
	});
};

const Props = defineProps({
	item: Object,
	currentIndex: Number,
	tabIndex: Number
});

watch(
	() => Props.currentIndex,
	(newVal) => {
		if (newVal === Props.tabIndex) {
			//懒加载，当滑动到当前的item时，才去加载
			if (!firstLoaded.value || !orders.value.length) {
				firstLoaded.value = true;
				setTimeout(() => {
					paging.value.reload();
				}, 100);
			}
		}
	},
	{ immediate: true }
);

const queryList = (pageNum, pageSize) => {
	// 默认查询所有
	let fun: any = listOrderByLogistics;
	// 平台
	if (Props.item.value == '1') {
		fun = listOrder;
	}
	// 复购
	if (Props.item.value == '2') {
		fun = listRepeatPurchaseOrder;
	}

	fun({ pageNum, pageSize }).then((res) => {
		const data = res.rows.map((v) => {
			const status = orderStatusStr(v.orderStatus);
			v.wuliu = status;
			return v;
		});
		paging.value.complete(data);
	});
};

// 计算多包裹的子包裹金额总数

// 搜索
const searchData = () => {};

// 使用示例：拦截物流
const interceptOrder = (row) => {
	execute(row, 'intercept');
};

// 使用示例：取消发货
const cancelOrder = (row) => {
	execute(row, 'cancel');
};

// 按钮统一样式
const btnStyle = {
	margin: 0,
	padding: '16rpx 24rpx',
	fontSize: '24rpx',
	borderRadius: '12rpx',
	transition: 'all 0.2s ease'
};
</script>

<style scoped lang="scss">
.container {
	background: linear-gradient(135deg, #f7f9fc 0%, #f0f3fa 100%);
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.search-wrapper {
	padding: 20rpx 20rpx;
	background: #fff;
}

.order-list {
	padding: 20rpx;
}

.order-card {
	background: #ffffff;
	border-radius: 24rpx;
	padding: 32rpx;
	margin-bottom: 24rpx;
	box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.06);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	border: 1px solid #f0f0f0;
	overflow: hidden;
}

.order-card:hover {
	transform: translateY(-4rpx);
	box-shadow: 0 16rpx 48rpx rgba(0, 122, 255, 0.12);
	border-color: #e0e7ff;
}

.order-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 28rpx;
	font-weight: 600;
	color: #1a1a1a;
	font-size: 28rpx;
}

.order-no {
	font-size: 28rpx;
	color: #333;
	display: flex;
	align-items: center;
	gap: 10rpx;
}

.order-status {
	font-size: 22rpx;
	font-weight: bold;
	overflow: hidden;
}

.info-row {
	display: flex;
	align-items: center;
	margin-bottom: 18rpx;
	font-size: 28rpx;
	color: #444;
}

.info-row.address-row {
	color: #555;
}

.info-text {
	margin-left: 16rpx;
	line-height: 1.5;
	word-break: break-word;
	flex: 1;
	font-size: 28rpx;
}

.price-time-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 24rpx 0;
	color: #222;
	font-size: 28rpx;
}

.price {
	font-weight: bold;
	color: #e63946;
	font-size: 32rpx;
}

.time {
	color: #888;
	font-size: 24rpx;
}

.action-row {
	display: flex;
	justify-content: flex-end;
	gap: 16rpx;
}

.bottom-tip {
	text-align: center;
	color: #aaa;
	font-size: 24rpx;
	padding: 20rpx;
}
</style>
